import Head from 'next/head';
import Examples from '../../../example-groups/ExpandingExamples';

<Head>
  <title>{'Chart Detail Panel Example - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="A Material React Table example demonstrating how to use MUI X Charts with the Detail Panel feature."
  />
  <meta
    property="og:title"
    content="Chart Detail Panel Material React Table Example"
  />
  <meta
    property="og:description"
    content="A Material React Table example demonstrating how to use MUI X Charts with the Detail Panel feature."
  />
</Head>

## Chart Detail Panel Example

The detail panel features can be used for a variety of purposes. In this example, we are integrating the new [MUI X Charts](https://mui.com/x/react-charts/getting-started/) library to display an expandable line chart for each row.

You could, of course, use any charting library that you prefer, but using MUI X Charts will give you a consistent look and feel with Material React Table and any other Material UI components you may be using.

<Examples isPage />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-aggregation-examples)**
